<template>
  <div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确认要删除该条数据吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </span>
    </el-dialog>
    <div class="search">
      <el-form label-width="80px">
        <el-row>
          <el-col :span="6" style="padding: 0 8px">
            <el-form-item label="用户昵称">
              <el-input
                v-model="searchObject.creatorName"
                size="small"
                placeholder="用户昵称"
                name="creatorName"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="18" style="padding: 0 10px; margin-top: 5px">
            <el-row type="flex" justify="end">
              <el-button size="small" type="primary" @click="search"
                >搜索</el-button
              >
              <el-button size="small" plain @click="clearData"
                >清除条件</el-button
              >
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="data-content">
      <el-table
        v-loading="loading"
        :data="tableData.list"
        @sort-change="changeTableSort"
        style="width: 100%; font-size: 12px"
      >
        <el-table-column label="用户" prop="creatorName" width="100">
        </el-table-column>
        <el-table-column label="ip地址" prop="ip" sortable="custom" width="200">
        </el-table-column>
        <el-table-column
          label="访问时间"
          prop="addDate"
          sortable="custom"
          width="160"
        >
        </el-table-column>
        <el-table-column label="耗时" sortable="custom" width="160">
          <template slot-scope="scope">
            {{ scope.row.consumeTime }}毫秒
          </template>
        </el-table-column>
        <el-table-column label="url地址" prop="url"> </el-table-column>
        <el-table-column width="120" align="center" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-info"
              @click="show(scope.row)"
              >详情
            </el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              class="danger"
              size="mini"
              style="cursor: pointer"
              @click="deleteData(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="page">
        <el-pagination
          background
          :current-page="searchObject.no"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="tableData.size"
          :pager-count="5"
          layout="total, sizes, prev, pager, next, jumper"
          :page-count="tableData.totalPage"
          :total="tableData.total"
          @size-change="sizeChange"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "dish_home",
  data() {
    return {
      searchObject: {
        no: 1,
        size: 10,
        creatorName: "",
      },
      selectId: {},
      dialogVisible: false,
      defaultProps: {
        children: "children",
        label: "name",
      },
      loading: false,
      tableData: {},
      activeIndex: "1",
    };
  },
  methods: {
    addView() {
      this.$router.push({ path: "/accesslog/add" });
    },
    editView(row) {
      var data = {};
      data.id = row.id;
      this.$router.push({ path: "update", query: data });
    },
    handleSelect(event) {
      if (event === "1") {
        this.searchObject.orderState = "";
      } else {
        this.searchObject.orderState = event;
      }
      this.getSearchList();
    },
    async getSearchList() {
      console.info("搜索数据");
      this.loading = true;
      var data = this.searchObject;
      var self = this;
      var url = self.$CONFIG.REMOTE_URL + "/tenantRest/accesslog/search.htm";
      console.info(url);
      var res = await this.$HTTP.form(url, data);
      if (res.code == 0) {
        self.tableData = res;
      }
      setTimeout(function () {
        self.loading = false;
      }, 300);
    },
    sizeChange(event) {
      this.searchObject.size = event;
      this.getSearchList();
    },
    pageChange(index) {
      this.searchObject.no = index;
      this.getSearchList();
    },
    search() {
      this.searchObject.no = 1;
      this.getSearchList();
    },
    clearData() {
      console.info("..." + new Date());
      this.searchObject.creatorName = "";
    },
    deleteData(event) {
      this.selectId = event.id;
      this.dialogVisible = true;
    },
    show(row) {
      var param = {};
      param.id = row.id;
      this.$router.push({ path: "/accesslog/view", query: param });
    },
    changeTableSort(column) {
      this.searchObject.sortField = column.prop;
      if ("descending" == column.order) {
        this.searchObject.sortMethod = "desc";
      } else if ("ascending" == column.order) {
        this.searchObject.sortMethod = "asc";
      } else {
        this.searchObject.sortMethod = "";
      }
      this.getSearchList();
    },
    async handleClose() {
      this.dialogVisible = false;
      var self = this;
      if (self.selectId) {
        var params = {};
        params.id = self.selectId;

        var result = await this.$HTTP.form(
          this.$CONFIG.REMOTE_URL + "/tenantRest/accesslog/delete.htm",
          params
        );
        if (result.code == 0) {
          this.getSearchList();
        }
      }
    },
  },
  mounted() {
    this.getSearchList();
  },
};
</script>

<style>
.model-content {
  margin-top: 20px;
}
/* 搜索 */
.search {
  background-color: #fff;
  padding: 10px 0px;
  box-sizing: border-box;
  border-radius: 1px;
  margin-bottom: 10px;
}
.data-content {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  padding: 10px;
  width: 100%;
}
.tool-add {
  padding: 0px;
  text-align: left;
}
</style>